<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>pc项目</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>

<!--模拟body-->
<!--wrap:包裹-->
<div class="wrap">
    <!--侧边栏-->
    <div class="toolBar toolOut">
        <!--按钮-->
        <div class="toolBtn list">

        </div>
        <!--内容-->
        <div class="toolContent">

        </div>
        <!--菜单-->
        <ul class="toolList">
            <li>
                <i class="icon"></i>
                <em>商品会员</em>
            </li>
            <li>
                <i class="icon"></i>
                <em>商品会员</em>
            </li>
            <li>
                <i class="icon"></i>
                <em>商品会员</em>
            </li>
            <li>
                <i class="icon"></i>
                <em>商品会员</em>
            </li>
            <li>
                <i class="icon"></i>
                <em>商品会员</em>
            </li>
            <li>
                <i class="icon"></i>
                <em>商品会员</em>
            </li>
        </ul>
    </div>
    <!--头部-->
    <div class="header">
        <!--上面-->
        <div class="top">
            <!--版心-->
            <div class="topMain">
                <!--登录注册-->
                <div class="login">
                    <p>欢迎来到尚品汇！ 请</p>
                    <p class="loginBtn">
                        <a href="javascript:;" class="btn1">登录</a>
                        <a href="javascript:;">注册</a>
                    </p>
                </div>
                <!--头部导航-->
                <div class="topNav">
                    <a href="javascript:;">我的订单</a>
                    <a href="javascript:;">我的购物车</a>
                    <a href="javascript:;">我的尚品汇</a>
                    <a href="javascript:;">尚品汇会员</a>
                    <a href="javascript:;">企业采购</a>
                    <a href="javascript:;">关注尚品汇</a>
                    <a href="javascript:;">合作招商</a>
                    <a href="javascript:;">商家后台</a>

                </div>
            </div>

        </div>
        <!--下面-->
        <div class="bottom">
            <!--版心-->
            <div class="bottomMain">
                <!--logo-->
                <h1 class="logo">
                    <a href="###">
                        <img src="images/Logo.png" alt="logo">
                    </a>
                </h1>
                <!--搜索框-->
                <div class="search">
                    <input type="text">
                    <button>搜索</button>
                </div>
            </div>
        </div>
    </div>

    <!--分类导航-->
    <div class="typeNav">
        <!--版心-->
        <div class="typeNavMain">
            <h3>全部商品分类</h3>
            <div class="typeList">
                <a href="###">服装城</a>
                <a href="###">美妆馆</a>
                <a href="###">尚品汇超市</a>
                <a href="###">全球购</a>
                <a href="###">闪购</a>
                <a href="###">团购</a>
                <a href="###">有趣</a>
                <a href="###">秒杀</a>
            </div>
        </div>
    </div>

    <!--大的版心-->
    <!--商品内容区域-->
    <div class="main">
        <!--路径导航+放大镜+筛选区域版心-->
        <div class="mainCoin">
            <!--路径导航：数据动态渲染，先写死数据排出模板-->
            <div class="conPoin">
                <!--            <a href="###">手机数码通讯</a>-->
                <!--            <i>/</i>-->
                <!--            <a href="###">手机</a>-->
                <!--            <i>/</i>-->
                <!--            <a href="###">iPad</a>-->
                <!--            <i>/</i>-->
                <!--            <a href="###">苹果</a>-->
                <!--            <i>/</i>-->
                <!--            <a >Apple</a>-->
            </div>
            <!--商品区域-->
            <div class="infoWrap">
                <!--左侧：放大镜区域+缩略图-->
                <div class="previwWrap">
                    <!--放大镜-->
                    <div class="previw">
                        <!--小图容器-->
                        <div class="zoomImgBox">
                            <!--小图-->
<!--                            <img src="images/s1.png" alt="">-->
                            <!--蒙版-->
                        </div>
                        <!--大图容器-->
                    </div>
                    <!--缩略图-->
                    <div class="thumbnail">
                        <a href="javascript:;" class="prev" style="text-decoration: none">&lt;</a>
                        <!--图片显示区域-->
                        <div class="itemWrap">
                            <ul>
<!--                                <li><img src="images/s1.png" alt=""></li>-->
<!--                                <li><img src="images/s2.png" alt=""></li>-->
<!--                                <li><img src="images/s3.png" alt=""></li>-->
<!--                                <li><img src="images/s1.png" alt=""></li>-->
<!--                                <li><img src="images/s2.png" alt=""></li>-->
<!--                                <li><img src="images/s3.png" alt=""></li>-->
<!--                                <li><img src="images/s1.png" alt=""></li>-->
<!--                                <li><img src="images/s2.png" alt=""></li>-->
<!--                                <li><img src="images/s3.png" alt=""></li>-->
                            </ul>
                        </div>
                        <a href="javascript:;" class="next" style="text-decoration: none">&gt;</a>
                    </div>
                </div>

                <!--右侧：筛选区域-->
                <div class="chooseWrap">
                    <!--基本信息-->
                    <div class="infoTop">

                    </div>
                    <!--筛选区域-->
                    <div class="choose">
                        <!--选择结果-->
                        <div class="choosed">
<!--                            <mark>黑色<a href="###">X</a></mark>-->
                        </div>
                        <!--选项-->
                        <div class="chooseArea">
<!--                            <dl>-->
<!--                                <dt>选择颜色</dt>-->
<!--                                <dd>金色</dd>-->
<!--                                <dd>银色</dd>-->
<!--                                <dd>灰色</dd>-->
<!--                            </dl>-->
<!--                            <dl>-->
<!--                                <dt>内存容量</dt>-->
<!--                                <dd>16G</dd>-->
<!--                                <dd>64G</dd>-->
<!--                                <dd>128G</dd>-->
<!--                                <dd>256G</dd>-->
<!--                            </dl>-->
<!--                            <dl>-->
<!--                                <dt>选择版本</dt>-->
<!--                                <dd>公开版</dd>-->
<!--                                <dd>移动版</dd>-->
<!--                            </dl>-->
<!--                            <dl>-->
<!--                                <dt>购买方式</dt>-->
<!--                                <dd>官方标配</dd>-->
<!--                                <dd>优惠移动版</dd>-->
<!--                                <dd>电信优惠版</dd>-->
<!--                            </dl>-->
                        </div>
                        <!--购物车-->
                        <div class="carWrap">
                            <!--控制区域-->
                            <div class="control">
                                <input type="text">
                                <a href="javascript:;" class="up">+</a>
                                <a href="javascript:;" class="down">-</a>
                            </div>
                            <!--按钮区域-->
                            <button class="comeCar">加入购物车</button>
                        </div>
                    </div>
                </div>

            </div>

            <!--商品详情区域-->
            <div class="detailWrap">
                <!--侧边栏-->
                <aside>
                    <!--按钮区域-->
                    <div class="tabWrap">
                        <h4 class="active">相关分类</h4>
                        <h4 >推荐品牌</h4>
                    </div>
                    <!--内容区域-->
                    <div class="tabContent">
                        <div class="active">
                            <ul class="partList">
                                <li>手机</li>
                                <li>手机壳</li>
                                <li>内存卡</li>
                                <li>iPhone配件</li>
                                <li>贴膜</li>
                                <li>手机耳机</li>
                                <li>移动电源</li>
                                <li>平板电脑</li>
                            </ul>

                            <div class="goodsList">
                                <div class="item">
                                    <div class="partImg">
                                        <img src="images/part01.png" alt="">
                                    </div>
                                        <p class="partName">品胜充电宝</p>
                                        <p class="partPrice">￥6088.00</p>
                                        <div class="carBox">
                                            <a href="javascript:;">加入购物车</a>
                                        </div>

                                </div>
                                <div class="item">
                                    <div class="partImg">
                                        <img src="images/part02.png" alt="">
                                    </div>
                                        <p class="partName">品胜充电宝</p>
                                        <p class="partPrice">￥6088.00</p>
                                        <div class="carBox">
                                            <a href="javascript:;">加入购物车</a>
                                        </div>

                                </div>
                                <div class="item">
                                    <div class="partImg">
                                        <img src="images/part03.png" alt="">
                                    </div>
                                    <p class="partName">品胜充电宝</p>
                                    <p class="partPrice">￥6088.00</p>
                                    <div class="carBox">
                                        <a href="javascript:;">加入购物车</a>
                                    </div>

                                </div>
                                <div class="item">
                                    <div class="partImg">
                                        <img src="images/part01.png" alt="">
                                    </div>
                                    <p class="partName">品胜充电宝</p>
                                    <p class="partPrice">￥6088.00</p>
                                    <div class="carBox">
                                        <a href="javascript:;">加入购物车</a>
                                    </div>

                                </div>
                            </div>
                        </div>
                        <div>推荐品牌</div>
                    </div>
                </aside>
                <!--详情区域-->
                <div class="detail">
                    <!--选择搭配-->

                    <div class="fitting">
                        <h4>选择搭配</h4>
                        <div class="goodSuits">
                            <div class="master">
                                <img src="images/l-m01.png" alt="">
                                <p>￥5299</p>
                                <i>+</i>
                            </div>
                            <div class="suits">
                                <div class="item">
                                    <img src="images/dp01.png" alt="">
                                    <p>小夜灯</p>
                                    <lable for="">
                                        <input type="checkbox" value="50">
                                        <span>50</span>
                                    </lable>
                                </div>
                                <div class="item">
                                    <img src="images/dp02.png" alt="">
                                    <p>手机支架</p>
                                    <lable for="">
                                        <input type="checkbox" value="50">
                                        <span>50</span>
                                    </lable>
                                </div>
                                <div class="item">
                                    <img src="images/dp03.png" alt="">
                                    <p>眼部按摩仪</p>
                                    <lable for="">
                                        <input type="checkbox" value="50">
                                        <span>50</span>
                                    </lable>
                                </div>
                                <div class="item">
                                    <img src="images/dp04.png" alt="">
                                    <p>Feless-VR眼镜</p>
                                    <lable for="">
                                        <input type="checkbox" value="50">
                                        <span>50</span>
                                    </lable>
                                </div>
                            </div>
                            <div class="result">
                                <div>已购0件商品</div>
                                <h5>套餐价</h5>
                                <p>￥5299</p>
                                <button>加入购物车</button>
                            </div>
                        </div>
                    </div>
                    <!--商品详情-->
                    <div class="intro">
                        <ul class="tabWrap">
                            <li class="active"><a href="javascript:;">商品介绍</a></li>
                            <li><a href="javascript:;">规格与包装</a></li>
                            <li><a href="javascript:;">售后保障</a></li>
                            <li><a href="javascript:;">商品评价</a></li>
                            <li><a href="javascript:;">手机社区</a></li>
                        </ul>
                        <div class="tabContent">
                            <div class="active">
                                <ul class="goods-intro">
                                    <li>分辨率：1920*1080(FHD)</li>
                                    <li>后置摄像头：1200万像素</li>
                                    <li>前置摄像头：500万像素</li>
                                    <li>核 数：其他</li>
                                    <li>频 率：以官网信息为准</li>
                                    <li>品牌： Apple</li>
                                    <li>商品名称：APPLEiPhone 6s Plus</li>
                                    <li>商品编号：1861098</li>
                                    <li>商品产地：中国大陆</li>
                                    <li>商品毛重：0.51kg</li>
                                    <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
                                    <li>系统：苹果（IOS）</li>
                                    <li>像素：1000-1600万品毛重：0.51kg</li>
                                    <li>机身内存：64GB</li>
                                </ul>
                                <img src="images/intro01.png" alt="">
                                <img src="images/intro02.png" alt="">
                                <img src="images/intro03.png" alt="">
                            </div>
                            <div>规格与包装</div>
                            <div>售后保障</div>
                            <div>商品评价</div>
                            <div>手机社区</div>
                        </div>
                    </div>
                </div>
                <div>
                    <!---->
                </div>
            </div>


        </div>





    </div>


</div>

<!--引入数据-->
<script src="js/data.js"></script>
<script>
    /*

                JS:
                    -js中有函数预解析，函数优先级会自动提升，所以可以先调用，再定义



    * */

    //页面加载的回调函数，在页面加载完成后执行
    window.onload = function () {
        //放大镜大图路径索引
        var previwID = 0;

        //路径导航
        conPoin();
        function conPoin() {
            //获取数据
            var path = goodData.path;
            //向路径导航的父容器里面添加数据
            var conPoinNode = document.querySelector('.wrap .main .mainCoin .conPoin');
            for (let i = 0; i < path.length; i++) {
                var aNode = document.createElement('a');
                //判断是否是最后一个a
                if (i == path.length-1 ){
                    aNode.innerHTML = path[i].title;
                    conPoinNode.appendChild(aNode);
                }else {
                    aNode.innerHTML = path[i].title;
                    aNode.href = path[i].url;
                    var iNode = document.createElement('i');
                    conPoinNode.appendChild(aNode);
                    iNode.innerHTML = '/';
                    conPoinNode.appendChild(iNode);
                }
            }
        }

        //放大镜逻辑
        previw();
        function previw() {
            //获取放大镜父容器
            var previwNode = document.querySelector('.wrap .main .mainCoin .infoWrap .previwWrap .previw');
            //获取小图容器
            var zoomImgBox = document.querySelector('.wrap .main .mainCoin .infoWrap .previwWrap .previw .zoomImgBox');

            //当鼠标移入时：创建蒙版，创建大图容器，大图
            var maskNode = null;
            var bigImg = null;
            var bigImgBox = null;

            //小图动态渲染
            var imgsrc = goodData.imgsrc;
            var smallImg = document.createElement('img');
            smallImg.src = imgsrc[0].s;
            zoomImgBox.appendChild(smallImg);

            previwNode.onmouseenter = function () {
                //创建蒙版
                 if (!maskNode){
                     maskNode = document.createElement('div');
                     maskNode.className = 'mask';
                     zoomImgBox.appendChild(maskNode);
                     //创建大图容器
                     bigImgBox = document.createElement('div');
                     bigImgBox.className = 'bigImgBox';
                     previwNode.appendChild(bigImgBox);
                     bigImg = document.createElement('img');
                     bigImg.src = imgsrc[previwID].b;
                     bigImgBox.appendChild(bigImg);
                 }
                 //移动事件
                zoomImgBox.onmousemove = function (event) {
                     //兼容低版本IE
                     event = event || window.event;
                    //根据当前鼠标的坐标，来修改蒙版的位置
                    var maskPosition = {
                        //getBoundingClientRect():是获取元素位置最干净的方法
                        left : event.clientX - previwNode.getBoundingClientRect().left - maskNode.offsetWidth/2,
                        top : event.clientY - previwNode.getBoundingClientRect().top - maskNode.offsetHeight/2
                    }
                    //蒙版的边界值判断
                    if (maskPosition.left < 0){
                        maskPosition.left = 0;
                    }else if (maskPosition.left > previwNode.clientWidth - maskNode.offsetWidth){
                        maskPosition.left = previwNode.clientWidth - maskNode.offsetWidth;
                    }
                    if (maskPosition.top < 0){
                        maskPosition.top = 0;
                    }else if (maskPosition.top > previwNode.clientHeight - maskNode.offsetHeight){
                        maskPosition.top = previwNode.clientHeight - maskNode.offsetHeight;
                    }
                    maskNode.style.left = maskPosition.left + 'px';
                    maskNode.style.top = maskPosition.top + 'px';
                    //根据蒙版的位置，来修改大图的位置
                    //计算比例      蒙版可移动空间/大图可移动空间
                    var scale = (previwNode.clientWidth - maskNode.offsetWidth)/(bigImg.offsetWidth - bigImgBox.clientWidth);

                    var bigImgPositon = {
                        left : maskPosition.left/scale,
                        top : maskPosition.top/scale
                    }

                    bigImg.style.marginLeft = -bigImgPositon.left + 'px';
                    bigImg.style.marginTop = -bigImgPositon.top + 'px';

                }
                 //鼠标离开，移除事件
                previwNode.onmouseleave = function () {
                  zoomImgBox.removeChild(maskNode);
                  previwNode.removeChild(bigImgBox);

                  //重置元素变量为空的状态
                    maskNode = null;
                    bigImgBox = null;
                    bigImg = null;
                    //当鼠标移除时，删除蒙版
                  zoomImgBox.onmousemove = null;
                  previwNode.onmouseleave = null;
                };
            };
        }

        //缩略图
        thumbnail();
        function thumbnail() {
            //获取按钮
            var prevNode = document.querySelector('.wrap .main .mainCoin .infoWrap .previwWrap .thumbnail a.prev');
            var nextNode = document.querySelector('.wrap .main .mainCoin .infoWrap .previwWrap .thumbnail a.next');
            //获取图片容器
            var list = document.querySelector('.wrap .main .mainCoin .infoWrap .previwWrap .thumbnail .itemWrap ul');

            //缩略图动态渲染
            var imgsrc = goodData.imgsrc;
            imgsrc.forEach(function (item) {
                var liNode = document.createElement('li');
                var imgNode = document.createElement('img');
                imgNode.src = item.s;
                liNode.appendChild(imgNode);
                list.appendChild(liNode);
            });


            var items = document.querySelectorAll('.wrap .main .mainCoin .infoWrap .previwWrap .thumbnail .itemWrap ul li');

            //显示图片张数
            var moveNum = 2;
            var showImg = 5;
            //单次移动的距离
            var moveLeft = (items[0].offsetWidth + 20) * moveNum;
            //余下一共可以移动的距离
            var countLeft = (items.length - showImg) * (items[0].offsetWidth + 20);
            // console.log(items.length);
            //已经移动的距离
            var tempLeft = 0;
            nextNode.onclick = function () {
                if (tempLeft < countLeft){
                  if (countLeft - tempLeft > moveLeft){
                      tempLeft += moveLeft;
                      list.style.left = -tempLeft + 'px';
                  }else {
                      tempLeft = countLeft;
                      list.style.left = -tempLeft + 'px';
                  }
              }
            };

            prevNode.onclick = function () {
              if (tempLeft > 0){
                  //说明当前左侧还有空间可以移动
                  if (tempLeft > moveLeft){
                      tempLeft -= moveLeft;
                  }else {
                      tempLeft = 0;
                  }
                  list.style.left = -tempLeft + 'px';
              }
            };

        }

        //缩略图动态渲染，及点击
        thumbnailClick();
        function thumbnailClick() {
            //获取li的集合
            var items = document.querySelectorAll('.wrap .main .mainCoin .infoWrap .previwWrap .thumbnail .itemWrap ul li');
            var smallImg = document.querySelector('.wrap .main .mainCoin .infoWrap .previwWrap .previw .zoomImgBox img');
            var imgsrc = goodData.imgsrc;
            for (let i = 0; i < items.length; i++) {
                //添加索引
                items[i].index = i;
                items[i].onclick = function () {
                  var imgSrc = imgsrc[this.index].s;
                  smallImg.src = imgSrc;

                  previwID = this.index;
                };
            }
        }

        //商品信息渲染
        infoData();
        function infoData() {
            var infoTopNode = document.querySelector('.wrap .main .mainCoin .infoWrap .chooseWrap .infoTop ');
            var goodDetail = goodData.goodsDetail;
            var str = `
                        <h3>${goodDetail.title}</h3>
                        <p>${goodDetail.recommend}</p>
                        <!--价钱-->
                        <div class="priceWrap">
                            <div class="priceTop">
                                <p class="title">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格</p>
                                <p class="price">
                                    <i>￥</i>
                                    <em>${goodDetail.price}</em>
                                    <span>降价通知</span>
                                </p>
                                <p class="remark">
                                    <i>累计评价</i>
                                    <span>${goodDetail.evaluateNum}</span>
                                </p>
                            </div>
                            <div class="priceBottom">
                                <p>促&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;销</p>
                                <div>
                                    <i>
                                        ${goodDetail.promoteSales.type}
                                    </i>
                                    <span>
                                        ${goodDetail.promoteSales.content}
                                    </span>
                                </div>
                            </div>
                        </div>
                        <!--地址-->
                        <div class="support">
                            <div>
                                <p class="title">支&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;持</p>
                                <p class="text">
                                    ${goodDetail.support}
                                </p>
                            </div>
                            <div>
                                <p class="title">
                                    配&nbsp;送&nbsp;至
                                </p>
                                <p class="text">
                                    ${goodDetail.address}
                                </p>
                            </div>
                        </div>`;

                        //将HTML 代码添加进 infoTopNode
                        infoTopNode.innerHTML = str;
        }


        //选择区域逻辑
        chooseArea()
        function chooseArea() {
            var crumbData = goodData.goodsDetail.crumbData;
            //获取父元素
            var choooseArea = document.querySelector('.wrap .main .mainCoin .infoWrap .chooseWrap .choose .chooseArea ');
            //遍历数据
            crumbData.forEach(function (item) {
               //item是数组中的每一个对象{}
               var dlNode = document.createElement('dl');
               var dtNode = document.createElement('dt');
               //往dt中添加文本
               dtNode.innerHTML = item.title;
               dlNode.appendChild(dtNode);
               //遍历item中的数组
               item.data.forEach(function (item) {
                   var ddNode = document.createElement('dd');
                   ddNode.innerHTML = item.type;
                   //给每一个选项添加价钱改变的属性
                   ddNode.setAttribute('changePrice',item.changePrice);
                   dlNode.appendChild(ddNode);
               });
               choooseArea.appendChild(dlNode);
            });

            //获取dl集合
            var dlList = document.querySelectorAll('.wrap .main .mainCoin .infoWrap .chooseWrap .choose .chooseArea dl');
            var choosedNode = document.querySelector('.wrap .main .mainCoin .infoWrap .chooseWrap .choose .choosed');

            //定义数组容器
            var arr = new Array(dlList.length);
            //数组填充方法
            arr.fill(0);
            // for (let i = 0; i < arr.length; i++) {
            //     arr[i] = 0;
            // }
            //遍历dl集合,给每一个dl添加索引，并且分别给每一个dl当中的dd集合绑定单击事件
            for (let i = 0; i < dlList.length; i++) {
                //添加索引
                dlList[i].index = i;
                //回调函数的执行方式和特点会影响执行结果
                (function () {
                    //分别获取每一个dl下的dd
                    var ddList = dlList[i].getElementsByTagName('dd');

                    for (let j = 0; j < ddList.length; j++) {
                        ddList[j].onclick = function () {
                            //高亮切换 --- 排他法
                            for (let k = 0; k < ddList.length; k++) {
                                ddList[k].style.color = '#666';
                            }
                            this.style.color = 'red';
                            //根据当前点击dd的父元素dl的索引，去存文本
                            arr[this.parentNode.index] = this;
                            priceSum(arr);
                            console.log(arr);

                            //创建逻辑
                            //清空父元素
                            choosedNode.innerHTML = "";
                            //点击dd，改变筛选条件
                            arr.forEach(function (item,index) {
                                if (item){
                                    //创建mark标签
                                    var markNode = document.createElement('mark');
                                    markNode.innerHTML = item.innerHTML;
                                    //创建a标签
                                    var aNode = document.createElement('a');
                                    aNode.innerHTML = 'X';
                                    //给a标签添加属性，用来保存当前选项的索引
                                    aNode.setAttribute('num',index);
                                    markNode.appendChild(aNode);
                                    choosedNode.appendChild(markNode);
                                }
                            });
                            //删除逻辑
                            //获取a标签的集合
                            var aList = document.querySelectorAll('.wrap .main .mainCoin .infoWrap .chooseWrap .choose .choosed mark a');

                            for (let k = 0; k < aList.length; k++) {
                                aList[k].onclick = function () {
                                    //删除mark标签
                                    choosedNode.removeChild(this.parentNode);
                                    //清空数据
                                    var index = parseInt(this.getAttribute('num'));
                                    arr[index] = 0;
                                    priceSum(arr);
                                    var ddList = dlList[index].getElementsByTagName('dd');
                                    for (let l = 0; l < ddList.length; l++) {
                                        ddList[l].style.color = '#666';
                                    }
                                    ddList[0].style.color = 'red';
                                }

                            }



                        }

                    }
                })();

            }

          //价钱计算
          function priceSum(arr) {
              //获取原价
              var price = goodData.goodsDetail.price;
              //显示价钱的元素
              var priceNode = document.querySelector('.wrap .main .mainCoin .infoWrap .chooseWrap .infoTop .priceWrap .priceTop p.price em');

              //遍历数组，将数组的changeprice加等在一起
              arr.forEach(function (item) {
                 if (item){
                     price += parseInt(item.getAttribute('changePrice'));
                 }
              });
              console.log(price);
              priceNode.innerHTML = price;
              //商品价钱元素
              var masterPriceNode = document.querySelector('.wrap .main .mainCoin .detailWrap .detail .fitting .goodSuits .master p');
              //搭配后价钱元素
              var choosedNode = document.querySelector('.wrap .main .mainCoin .detailWrap .detail .fitting .goodSuits .result p');

              //复选框集合
              var checkBoxNodes = document.querySelectorAll('.wrap .main .mainCoin .detailWrap .detail .fitting .goodSuits .suits .item input');

              masterPriceNode.innerHTML = '￥'+price;

              for (let i = 0; i < checkBoxNodes.length; i++) {
                  if (checkBoxNodes[i].checked){
                      price += parseInt(checkBoxNodes[i].value);
                  }
              }

              choosedNode.innerHTML = '￥'+price;



          }
        }

        //侧边栏tab切换
        // asideTab()
        // function asideTab() {
        //
        //     //获取按钮集合
        //     var tabBtn = document.querySelectorAll('.wrap .main .mainCoin .detailWrap aside .tabWrap h4');
        //
        //     //获取内容集合
        //     var tabContent = document.querySelectorAll('.wrap .main .mainCoin .detailWrap aside .tabContent>div');
        //
        //     //添加索引
        //     for (let i = 0; i < tabBtn.length; i++) {
        //         tabBtn[i].index = i;
        //         tabBtn[i].onclick = function () {
        //             tabBtn[i].className = 'active'
        //             for (let j = 0; j < tabBtn.length; j++) {
        //                //取消active
        //                 tabBtn[j].className = '';
        //                 tabContent[i].className = '';
        //
        //             }
        //             this.className = 'active';
        //             tabContent[this.index].className = 'active';
        //         };
        //     }
        //
        // }

        //构造函数
        function Tab(tabBtn,tabContent) {
            this.tabBtn = tabBtn;
            this.tabContent = tabContent;
            //创建变量来保存外部的this，用来调用函数
            var _this = this;
            for (let i = 0; i < this.tabBtn.length; i++) {
                //添加索引
                this.tabBtn[i].index = i;
                this.tabBtn[i].onclick = function () {
                  _this.tabClick(this);
                };
            }
        }

        //添加原型方法
        Tab.prototype.tabClick = function (btn) {
            for (let i = 0; i < this.tabBtn.length; i++) {
                this.tabBtn[i].className = '';
                this.tabContent[i].className = '';
            }
            this.tabContent[btn.index].className = 'active';
            btn.className = 'active';
        }

        asideTab();
        function asideTab() {
            //获取按钮集合
            var tabBtn = document.querySelectorAll('.wrap .main .mainCoin .detailWrap aside .tabWrap h4');

            //获取内容集合
            var tabContent = document.querySelectorAll('.wrap .main .mainCoin .detailWrap aside .tabContent>div');

            new Tab(tabBtn,tabContent);
        }



        infroTab();

        //商品详情Tab切换
        function infroTab() {
            //获取按钮集合
            var tabBtn = document.querySelectorAll('.wrap .main .mainCoin .detailWrap .detail .tabWrap li');
            //获取元素集合
            var tabCOntent = document.querySelectorAll('.wrap .main .mainCoin .detailWrap .detail .tabContent > div');

            new Tab(tabBtn,tabCOntent);
        }


        //价钱联动
        fitting();
        function fitting() {
            //商品价钱元素
            var priceNode = document.querySelector('.wrap .main .mainCoin .detailWrap .detail .fitting .goodSuits .master p');
            //搭配后价钱元素
            var choosedNode = document.querySelector('.wrap .main .mainCoin .detailWrap .detail .fitting .goodSuits .result p');

            //复选框集合
            var checkBoxNodes = document.querySelectorAll('.wrap .main .mainCoin .detailWrap .detail .fitting .goodSuits .suits .item input');

            for (let i = 0; i < checkBoxNodes.length; i++) {

                checkBoxNodes[i].onclick = function () {

                    var price = parseInt(priceNode.innerHTML.substr(1));
                    //每次复选框的单击事件执行时，都需要遍历整个复选框集合，判断出所有被选中的checkBox
                    for (let j = 0; j < checkBoxNodes.length; j++) {
                        if (checkBoxNodes[j].checked){
                            price += parseInt(checkBoxNodes[j].value);
                        }

                    }
                    choosedNode.innerHTML = '￥'+price;
                }
            }
        }

        //侧边栏
        toolBar();
        function toolBar() {
            var toolBarNode = document.querySelector('.wrap .toolBar');
            var toolBtnNode = document.querySelector('.wrap .toolBar .toolBtn ');
            //标志位  true:代表页面收起  false:对应页面展开
            var flag = true;

            toolBtnNode.onclick = function () {
                if (flag){
                    toolBarNode.className = 'toolBar toolWrap';
                    toolBtnNode.className = 'toolBtn cross';
                }else {
                    toolBtnNode.className = 'toolBtn list';
                    toolBarNode.className = 'toolBar toolOut';
                }
                flag = !flag;
            };
        }









    };


</script>
</body>
</html>